<template>
  <div class="portaLogin-page">
    <div class="header-background-image">
      <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/bg-header-background.png" class="background-image">
    </div>
    <div class="image-buy">
      <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/bg-image-content.png" class="content-image">
    </div>
    <div class="content">
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_name.png" class="icon-name">
        </div>
        <input type="text" name="" class="input-control" placeholder="请输入手机号" id="mobilePhone" v-model="phone">
      </div>
      <div class="line"></div>
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_password.png" class="icon-name">
        </div>
        <input type="password" name="" class="input-control" placeholder="请输入密码" id="password" v-model="password">
      </div>
    </div>
    <div class="footer" id="loginBtn" @click='submit'>
      <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_login.png" class="login-image">
    </div>
    <div class="reg clearfix">
      <p class="reg_content" style="float: left;"><span @click="goLoginPhone">验证码登录</span></p>
      <p class="reg_content" style="float: right;"><span @click="goregister">新用户注册</span></p>
    </div>
  </div>
</template>
<script>
import { wxshare } from 'common/mixin'
import { mapActions } from 'vuex'
import { Toast } from 'mint-ui';
import { checkPhone, checkpw } from 'common/utils'

export default {
  mixins: [wxshare],
  data() {
    return {
      phone: '',
      password: '',
    }
  },

  methods: {
    ...mapActions({
      channelLogin: 'ChannelLogin',
      getInfo: 'GetInfo'
    }),
    goregister() {
      this.$router.push({ path: 'register' });
    },
    goLoginPhone() {
      this.$router.push({ path: 'loginPhone' });
    },
    
    submit() {
      if (!checkPhone(this.phone)) {
        Toast('请先填写正确的手机号！');
        return false;
      }
      if (!checkpw(this.password)) {
        Toast('密码至少8位且包含数字和字母');
        return false;
      }
      this.channelLogin({ phone: this.phone, password: this.password }).then(result => {
        this.getInfo().then(data => {
          this.$router.push("/channel/home");
        })
      }).catch(msg => {
        Toast(msg);
      })
    }
  }
}

</script>
<style lang="less">
.portaLogin-page {

  .background-image {
    width: 100%;
    height: 4rem
  }

  .image-buy {
    margin-top: -4rem;
    margin-left: auto;
    margin-right: auto;
    width: 17rem;
  }

  .content-image {
    width: 100%;
    height: 6.45rem
  }

  .content {
    width: 100%;
    height: 6.1rem;
    background: #FFFFFF;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.10);
    margin-top: 0.75rem;
    margin-left: auto;
    margin-right: auto
  }

  .form-item {
    width: 100%;
    height: 3rem;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .iconBox {
    width: 4rem;
    text-align: center;
  }

  .icon-name {
    width: 0.8rem;
    height: 0.8rem;
  }

  .input-control {
    width: 100%;
    height: 90%;
    padding-left: 0.8rem;
    outline: none;
    color: #d2d1d3;
    font-size: 0.9rem;
    font-family: PingFangSC;
  }

  .line {
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.10);
  }

  .footer {
    margin-top: 3rem;
    text-align: center;
  }

  .login-image {
    width: 15rem;
    height: 3.75rem;
  }
  .reg {
    width: 80%;
    margin: 20px auto;
    text-align: right;
  }

  .reg_content {
    color: #009cde;
    font-size: 0.8rem;
    font-family: "微软雅黑";
  }
}

</style>
